<template>
	<view>
		<uni-group title="热门城市">
			<view class="u-flex" style="justify-content: space-between;">
				<view v-for="(item,index) in list" @click="dianji(item)" class="u-p-10 u-border u-text-center u-bg-gray " style="width: 23%;" >{{item}}</view>
			</view>
		</uni-group>
		<uni-group title="选择城市">
			<u-form-item label="选择城市" label-width="200">
				<input type="text" :value="value" @click="dian(item)" placeholder="点击选择城市" />
			<u-picker mode="region" v-model="show" @confirm="xuanze"></u-picker>
			</u-form-item>
			<button type="primary" @click="dianji2">确定</button>
		</uni-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['三亚','北京','上海','广州'],
				show:false,
				value:'大连'
			}
		},
		methods: {
			dian(){
				this.show  = true
			},
			dianji(item){
				this.chuan(item)
			},
			dianji2(){
				this.chuan(this.value)
			},
			chuan(item){
				uni.setStorage({
					key:'chen',
					data:item,
					success: () => {
						uni.switchTab({
							url:'index'
						})
					}
				})
			},
			xuanze(e){
				let city = e.city.label
				let area = e.area.label
				let province = e.province.label
				this.value = province+city+area
				console.log(e)
			}
		}
	}
</script>

<style>

</style>
